<!-- src/pages/Home.vue -->
<template>
    <v-container>
      <v-row>
        <v-col v-for="article in articles" :key="article.id" cols="12" md="4">
          <v-card>
            <v-img :src="article.thumbnail" height="200px"></v-img>
  
            <v-card-title>{{ article.title }}</v-card-title>
  
            <v-card-text>{{ article.summary }}</v-card-text>
  
            <v-card-actions>
              <v-btn :to="`/articles/${article.id}`" text>阅读更多</v-btn>
  
            </v-card-actions>
  
          </v-card>
  
        </v-col>
  
      </v-row>
  
    </v-container>
  
  </template>
  
  <script>
  import { mapState, mapActions } from 'vuex'
  
  export default {
    name: 'Home',
    computed: {
      ...mapState(['articles']),
    },
    created() {
      this.fetchArticles()
    },
    methods: {
      ...mapActions(['fetchArticles']),
    },
  }
  </script>
  